<template>
	<div>
		<router-link tag="div" to="/" class="header-abs" v-show="showAbs">
			<span class="iconfont header-abs-icon">&#xe624;</span>
		</router-link>
		<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
			景点详情
			<router-link to="/">
				<div class="header-fixed-back iconfont">&#xe624;</div>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'detailHeader',
		data() {
			return {
				showAbs: true,
				opacityStyle: {
					opacity: 0
				}
			};
		},
		methods: {
			handleScroll() {
				const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
				if(top > 60){
					const opacity = top / 140
					// opacity == opacity > 1 ? =1
					this.opacityStyle = {
						opacity
					}
					this.showAbs = false
				}else{
					this.showAbs = true
				}
				console.log(top)
			}
		},
// 		mounted(){
// 			window.addEventListener('scroll',this.handleScroll)
// 		},
		activated:function(){
          window.addEventListener('scroll',this.handleScroll);//当从缓存中调取数据时触发该生命周期函数
		},
		deactivated:function(){
			 window.removeEventListener('scroll',this.handleScroll);
		 }
	}
</script>

<style scoped="scoped" lang="stylus">
	@import '~styles/varibles.styl'
	.header-abs
	 position:absolute
	 left: .2rem
	 top:.2rem
	 width:.8rem
	 height:.8rem
	 border-radius: .4rem
	 background: rgba(0,0,0,.8)
	 text-align:center
	 line-height:.8rem
	 .header-abs-icon
	  color:#fff
	  font-size:.4rem
	.header-fixed
	 position:fixed
	 top:0
	 left:0
	 right:0
	 overflow: hidden
	 height: $headerHeight
	 line-height: $headerHeight
	 text-align: center
	 color: #fff
	 background-color:$bgColor
	 font-size: .32rem
	 .header-fixed-back
	  text-align: center;
	  width: .64rem;
	  position: absolute;
	  top: 0
	  color: #fff

</style>
